import React, { useState } from 'react'


// React.memo 是用来缓存一个组件用的，只有组件内容的内容发生改变才会被重新渲染
const Child = React.memo(() => {

    console.log('Child被执行了');
    return <h1>Child</h1>
})

export default function App() {

    const [count, setcount] = useState(100)
    return (
        <div>
            <h1>App - {count}</h1>
            <button onClick={() => {
                setcount(count + 1)
            }}>点击加 1</button>


            <hr />

            {/* 
                每次 count 发生改变的时候，都会导致 Child 组件被重新渲染，但是 count 
                的改变和 Child 组件又没有任何关联。
                如果每次都重新渲染子组件，会太浪费资源了，所以有没有什么办法可以让 count 
                的改变不影响子组件的渲染
            */}
            <Child />
        </div>
    )
}
